<template>
    <div>
        <el-dialog v-model="dialogFlag" center :align-center="true" width="50%" class="updateDialog">
            <div class="updateTittle">
                <p>更新日志</p>
            </div>
            <el-scrollbar class="updateScollbar">
                <div class="updateLogBG" v-for="(item, index) in updateLog" :key="index">
                    <div>
                        <span v-html="item.logVersion.replace(/\n/g, function () { return '<br/>' })"></span>
                        <span v-html="item.logTitle.replace(/\n/g, function () { return '<br/>' })"></span>
                    </div>
                    <div>
                        <p v-html="item.logData.replace(/\n/g, function () { return '<br/>' })"></p>
                        <p v-html="item.logTime.replace(/\n/g, function () { return '<br/>' })"></p>
                    </div>
                </div>
            </el-scrollbar>
        </el-dialog>
    </div>
</template>

<script setup lang='js' name=''>
import { ref } from 'vue'
import getLogAPI from '@/API/main/UpdateLog/log';
const dialogFlag = defineModel()
const updateLog = ref([])
async function getUpdateLog() {
    const res = await getLogAPI()
    for (const key in res.data) {
        updateLog.value.unshift(res.data[key])
    }
}
getUpdateLog()
</script>
<style>
.updateDialog {
    background: var(--Update_Log) !important;
}
</style>
<style scoped>
.updateTittle {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.updateLogBG>div {
    margin-top: 10px;
    margin-bottom: 10px;
}

.updateLogBG>div:nth-child(1)>span:nth-child(1) {
    font-size: 20px;
    font-weight: bold;
    padding-right: 10px;
}

.updateLogBG>div:nth-child(1)>span:nth-child(2) {
    font-size: 18px;
    font-weight: bold;
}

.updateLogBG>div:nth-child(2) {
    padding-left: 20px;
}

.updateLogBG>div:nth-child(2)>p:nth-child(2) {
    font-size: 12px;
    text-align: right;
}

.updateScollbar {
    height: 500px;
}
</style>